<template>
	<view>
		<!-- 服务介绍 -->
		<view class="">
			<!-- 	<view class="bg-image"><image src="../../../static/bg12.png" mode="widthFix"></image></view> -->
			<view class="sangae">
				<view class="wrodsa">{{ service.describe }}</view>
				<view class="disag">
					<view class="Damoney">
						<text>{{ service.common_price }}</text>
						元/次
					</view>
				</view>
			</view>
			<view class="Acontent">
				<text @click="select(0)" :class="ind == 0 ? 'Acontent2' : ''">基本信息</text>
				<text @click="select(1)" :class="ind == 1 ? 'Acontent2' : ''">价格说明</text>
			</view>
			<view class="Foot" v-if="ind == 0"><image :src="service.detail_content" mode="widthFix" style="width: 660rpx;"></image></view>
			<view class="Foot" v-if="ind == 1"><image :src="service.service_notice" mode="widthFix" style="width: 660rpx;"></image></view>
			<view class="footer_container">
				<view class="query_btn">
					<button open-type="contact" size="mini" style="padding: 0;margin:0;border-radius: 10rpx;"><view class="btn">联系客服</view></button>
				</view>
				<view class="pay_btn"><view @click="createOrder">去购买</view></view>
			</view>
		</view>
	</view>
</template>
<script>
const commonurl = 'https://anxinpeizhen.rchz.top';
export default {
	data() {
		return {
			service: {},
			ind: 0
		};
	},
	onShow() {
		this.service = uni.getStorageSync('Subpage');
		this.service.detail_content = commonurl + this.service.service_detail_image;
		this.service.service_notice = commonurl + this.service.service_notice_image;
	},
	methods: {
		// 创建订单
		createOrder() {
			if (!uni.getStorageSync('user_id')) {
				uni.switchTab({
					url: '/pages/My/My'
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/HomePage/Aubordinate/order_buy?service_id=' + this.service.id
			});
			uni.setStorageSync('./fillin', this.service);
		},
		select(index) {
			this.ind = index;
		}
	}
};
</script>

<style lang="scss">
.left_T {
	width: 50rpx;
	height: 50rpx;
	margin-top: 50rpx;
	display: inline-block;
}

/* 底部 */
.agree {
	color: #ab68f7;
}

.bg-image {
	width: 100%;
	height: 300rpx;
	position: relative;

	image {
		width: 100%;
		height: 300rpx;
	}
}

.button {
	background-color: #5f5af7 !important;
	color: #ffffff !important;
	width: 600rpx;
	border-radius: 100rpx;
	margin-top: 10rpx;
}

.A_bottom {
	padding-top: 20rpx;
	width: 100%;
	height: 150rpx;
	margin-bottom: 0;
	background-color: #ffffff;
	bottom: 0;
	position: fixed;
	justify-content: center;
}

/* 卡片样式 */
.puper_a {
	margin-left: 80rpx;
}

.worder {
	height: 150rpx;
	margin: 30rpx;
	color: #424f5e;
	font-weight: 600;
	font-size: 30rpx;
}

.Foota {
	display: flex;
	height: 150rpx;
}

.Foot {
	width: 630rpx;
	margin-left: 50rpx;
	// margin-bottom: 300rpx;
	padding-bottom: 180rpx;
}

.pupera {
	width: 130rpx;
	height: 130rpx;
}

/* 服务内容样式 */
.Acontent {
	font-size: 35rpx;
	font-weight: 900;
	margin: 100rpx 40rpx 40rpx 60rpx;
	// margin-top: 140rpx;

	text:nth-child(2) {
		margin-left: 100rpx;
	}
}

.Acontent2 {
	font-size: 35rpx;
	font-weight: 900;
	color: #59d2b0;
}

/* 卡片样式 */
.Damoney {
	color: #59d2b0;
	font-weight: 700;
	font-size: 25rpx;

	text {
		font-size: 35rpx;
	}
}

.disag {
	display: flex;
	position: relative;
	// top: 100rpx;
	// height: 100rpx;
	// line-height: 100rpx;
	margin-top: 10rpx;
}

.deleo {
	text-decoration: line-through;
	font-size: 24rpx;
	color: #c4c4c4;
	margin-left: 50rpx;
	margin-top: 5rpx;
}

.sangae {
	background-color: #ffffff;
	width: 600rpx;
	margin-left: 50rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	position: absolute;
	top: 220rpx;
}

.wrodsa {
	width: 620rpx;
	font-size: 25rpx;
	color: #424f5e;
}

/* 图片样式 */
.picture {
	width: 100%;
}

/* 顶部样式 */
.Top {
	display: flex;
	padding: 20rpx;
}

.Topone {
	width: 280rpx;
	text-align: left;
	font-size: 45rpx;
	font-weight: 900;
	margin-left: 50rpx;
}

.Toptwo {
	font-size: 35rpx;
	font-weight: 900;
	margin-left: -50rpx;
	margin-top: 55rpx;
}

.President {
	background-color: #f9f9f9;

	background-size: 750rpx 350rpx;
}

/* 背景图 */
.frameone {
	background-repeat: no-repeat !important;
	background-size: 100% 450rpx !important;
	width: 100% !important;
	height: 450rpx !important;
}

.footer_container {
	width: 750rpx;
	height: 160rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;

	.query_btn {
		width: 260rpx;
		height: 120rpx;
		margin: 20rpx 40rpx 0;
		.btn {
			width: 260rpx;
			height: 90rpx;
			background: #ffffff;
			border-radius: 10rpx;
			border: 2rpx solid #59d2b0;
			font-size: 32rpx;
			text-align: center;
			font-weight: 400;
			color: #59d2b0;
			line-height: 90rpx;
			text-align: center;
		}
	}

	.pay_btn {
		width: 400rpx;
		height: 120rpx;
		margin: 20rpx 40rpx 0 0;

		view {
			width: 370rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #59d2b0;
			font-size: 32rpx;
			text-align: center;
			border-radius: 10rpx;
			color: #ffffff;
		}
	}
}
</style>
